<template>
	<div class="personal">
		<!-- 顶部 -->
		<van-nav-bar
			title="个人中心"
			left-text="返回"
			left-arrow
			@click-left="onClickLeft"
		/>
		<!-- 表单 -->
		<van-form @submit="onSubmit">
			<van-field
				v-model="value.userName"
				label="用户名"
				placeholder="请输入用户名"
			/>
			<van-field
				an-field
				v-model="value.nickName"
				label="昵称"
				placeholder="请输入昵称"
			/>
			<van-field
				an-field
				v-model="value.age"
				label="年龄"
				placeholder="请输入年龄"
			/>
			<van-field
				an-field
				v-model="value.gender"
				label="性别"
				placeholder="请输入性别"
			/>
			<van-field
				an-field
				v-model="value.birthday"
				label="生日"
				placeholder="请输入生日"
			/>
			<van-field
				v-model="value.avatar"
				rows="5"
				autosize
				label="描述"
				type="textarea"
				maxlength="50"
				placeholder="请输入描述"
				show-word-limit
			/>

			<div style="margin: 16px">
				<van-button round block type="info" native-type="submit"
					>确认修改</van-button
				>
			</div>
		</van-form>
	</div>
</template>

<script>
import { Toast } from "vant";
import { personalAPL } from "../services/anth";
import { userInfoAPL } from "../services/anth";

export default {
	data() {
		return {
			value: {
				userName: "",
				nickName: "",
				gender: "",
				birthday: "",
				avatar: "",
			},
		};
	},

	async created() {
		const res = await userInfoAPL();
		this.value = res.data;
	},

	methods: {
		onClickLeft() {
			this.$router.go(-1);
		},

		async onSubmit(values) {
			values = this.value;
			const res = await personalAPL(values);
			if (res.code == 1) {
				Toast.success({
					message: "修改成功",
				});
				//修改后跳转
				this.$router.replace({
					name: "User",
				});
			} else {
				Toast.fail({
					message: res.msg,
				});
			}
		},
	},
};
</script>

<style lang="scss">
.personal {
	.van-cell-group {
		margin-top: 30px;
	}
}
</style>
